* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.App {
    text-align: center;

    >* {
        margin: 20px auto;
    }
}

.send,
.list {
    width: 370px;
}

.send {
    >* {
        display: block;
        width: 100%;
        margin: 10px auto;
        padding: 10px;
        border-radius: 5px;
        font-size: 16px;
        border: none;
        outline: none;
    }

    >textarea {
        height: 80px;
        background: #f7f7f7;
        border: #eeeeee 1px solid;

        &:focus {
            background: #fff;
            border-color: #ccc;
        }
    }

    >button {
        background: #215fa4;
        color: white;
        cursor: pointer;

        &:hover {
            background: #4b80bb;
        }
    }
}

.list {
    list-style: none;
    border-radius: 5px;
    padding: 10px;
    background: #f2f2f2;

    >li {
        margin-bottom: 10px;
        padding: 10px;
        background: #fff;
        line-height: 1.5em;
        border-radius: 5px;

        >.content {
            font-size: 14px;
            text-align: left;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        >.time {
            font-size: 12px;
            color: #4b80bb;
            text-align: right;
        }

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
    }

}